<template>
    <div>
        <el-row class="rows">
            <el-col>
                <span>名称</span>
                <el-input style="width: 600px" clearable v-model="name" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>时长</span>
                <el-input style="width: 600px" clearable v-model="time" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>排序</span>
                <el-input style="width: 600px" clearable v-model="no" />
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3" :offset="18">
                <el-button @click="quxiao">
                    取消
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="save">
                    保存
                </el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
    import { ref, defineEmits } from "vue";

    let name = ref();
    let time = ref();
    let no = ref();

    const emites = defineEmits(["tuichu"]);

    const quxiao = function () {
        emites("tuichu");
    };

    const save = function () {
        emites("tuichu", {
            bName: name.value,
            bTime: time.value,
            bNo: no.value
        });
    };
</script>

<style lang="less" scoped>
    .rows {
        margin: 30px 0;
        span {
            font-weight: bold;
            position: relative;
            left: -10px;
            top: 0;
        }
    }

    .weizhi {
        display: flex;
        justify-content: start;
        align-items: center;
        position: relative;
        left: 7px;
    }
</style>